<!--
 * @Author: your name
 * @Date: 2020-06-23 13:40:12
 * @LastEditTime: 2020-06-23 14:53:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-next-test\src\views\Test.vue
--> 
<template>
  <div>
    <div>
      鼠标位置：
      <span>{{pos.x}}</span>,
      <span>{{pos.y}}</span>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, toRefs } from "vue";

function useMousePosition() {
  let pos = reactive({
    x: 0,
    y: 0
  });

  function update(e) {
    pos.x = e.pageX;
    pos.y = e.pageY;
  }

  onMounted(() => {
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    window.removeEventListener("mousemove", update);
  });

  return toRefs(pos);
}
export default {
  setup() {
    let pos = useMousePosition();

    return {
      pos
    };
  }
};
</script>

<style lang="scss">
</style>